/**
 * 交易明细
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>交易明细</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="boxBlock">
      <div class="serachTop">
          <!-- 搜索筛选 -->
          <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.cardNo"
                type="number"
                placeholder="输入卡号后四位"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.userId"
                type="number"
                placeholder="请输入使用者ID"
                v-if='hasPermission'
                clearable
              ></el-input>
            </el-form-item> 
            <el-form-item>
              <el-date-picker
                v-model="value1"
                size="small"
                type="datetimerange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="createdData"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-select
                size="small"
                v-model="formInline.cardType"
                placeholder="请选择卡类型"
                clearable
              >
                <el-option 
                  label="常规卡"
                   value="recharge" 
                ></el-option>
                <el-option 
                  label="共享卡"
                   value="share" 
                ></el-option>
              </el-select> 
            </el-form-item>
            <el-form-item>
              <el-select
                size="small"
                v-model="formInline.transactionType"
                placeholder="请选择交易类型"
              >
                <el-option
                  v-for="type in typeData"
                  :label="type.key"
                  :value="type.value"
                  :key="type.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                size="small"
                v-model="formInline.status"
                placeholder="请选择交易状态"
              >
                <el-option
                  v-for="type in statusData"
                  :label="type.key"
                  :value="type.value"
                  :key="type.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                size="small"
                v-model="formInline.transactionCurrency"
                placeholder="请选择交易币种"
              >
                <el-option label="请选择交易币种" value=""></el-option>
                <el-option
                  v-for="item in currencyData"
                  :label="item"
                  :value="item"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
              >
                搜索
              </el-button>
              <el-button size="small" type="primary" icon="el-icon-download" @click="exportEx()" v-if="hasPermission9"> 
                导出
              </el-button>
            </el-form-item>
          </el-form>
         
      </div>  
    <!--列表-->
    <div class="ra_box"> 
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 100%"
        v-if="listData"
      >
        <el-table-column
             prop="parentUserId"
            label="所有者ID"
            show-overflow-tooltip
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="userId"
            label="使用者ID"
            show-overflow-tooltip
            width="120"
          >
        </el-table-column>

        <el-table-column prop="cardNo" label="卡号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="transactionAmount"
          label="卡类型"
          show-overflow-tooltip
          width="110"
        >
          <template slot-scope="scope">
            {{ scope.row.cardType=='recharge'?'常规卡':'共享卡' }}
          </template>
        </el-table-column>  
        <el-table-column
          prop="merchantNameLocation"
          label="商户名称"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="transactionAmount"
          label="交易金额"
          show-overflow-tooltip
          width="110"
        >
          <template slot-scope="scope">
            {{ b(scope.row.transactionAmount) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="transactionCurrency"
          label="交易币种"
          show-overflow-tooltip
          width="90"
        >
        </el-table-column>

        <!--  -->
        <el-table-column
          prop="transactionFeeAmount"
          v-if="userInfo.userId=='1242'"
          label="交易手续费"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div> 

              {{  JSON.parse(scope.row.feeDetailJson).transactionFeeAmount }}

            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="crossBroadFeeAmount"
          label="跨境手续费"
          v-if="userInfo.userId=='1242'"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>  
              {{  JSON.parse(scope.row.feeDetailJson).crossBroadFeeAmount }}

            </div>
          </template>
        </el-table-column>
  

        <!-- <el-table-column
        prop="feeDeductionAmount"
        label="手续费"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div>
            {{ b(scope.row.feeDeductionAmount) }}
          </div>
        </template>
      </el-table-column> -->
        <!-- <el-table-column
        prop="transactionAmountRate"
        label="交易费率"
        show-overflow-tooltip
      >
      </el-table-column> -->
        <el-table-column
          prop="arrivalAmount"
          label="到账金额"
          show-overflow-tooltip
          width="110"
        >
          <template slot-scope="scope">
            <div>
              {{ b(scope.row.arrivalAmount) }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="cardBalance" label="卡余额" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ b(scope.row.cardBalance) }}
        </template>
      </el-table-column> -->
        <el-table-column
          prop="transactionType"
          label="交易类型"
          show-overflow-tooltip
          width="90"
        >
          <template slot-scope="scope">
            {{ typeJson[scope.row.transactionType] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="交易状态"
          show-overflow-tooltip
          width="90"
        >
          <template slot-scope="scope">
            {{ statusJson[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createdAt"
          label="交易时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ timestampToTime(scope.row.createdAt, 8 * 60 * 60) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150" >
          <template slot-scope="scope">
            <el-button size="mini" plain @click="handleEdit(scope.$index, scope.row)"> 
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
    <!-- 编辑界面 -->
    <el-dialog
      :close-on-click-modal="false"
      title="查看"
      :visible.sync="editFormVisible"
      width="30%"
      @close="closeDialog"
    >
      <el-form label-width="120px" :model="editForm" ref="editForm">
        <el-form-item label="流水号" prop="requestId">
          {{ editForm.requestId ? editForm.requestId : editForm.transactionId }}
        </el-form-item>
        <!-- <el-form-item label="卡ID" prop="cardId">
          {{ editForm.cardId }}
        </el-form-item> -->
        <el-form-item label="卡号" prop="cardNo">
          {{ editForm.cardNo }}
        </el-form-item>
        <el-form-item label="商户名称" prop="merchantNameLocation">
          {{ editForm.merchantNameLocation }}
        </el-form-item>
        <el-form-item label="授权码" prop="authCode" v-if="editForm.authCode">
          {{ editForm.authCode }}
        </el-form-item>

        <el-form-item label="网关手续费" prop="gatewayFeeAmount" v-if="editForm.feeDetailJson&&userInfo.userId=='1242'"> 
          {{  JSON.parse(editForm.feeDetailJson).gatewayFeeAmount || '-' }}
        </el-form-item>  
        <el-form-item label="跨境手续费" prop="crossBroadFeeAmount" v-if="editForm.feeDetailJson&&userInfo.userId=='1242'"> 
          {{  JSON.parse(editForm.feeDetailJson).crossBroadFeeAmount || '-'  }}
        </el-form-item>
       <el-form-item label="交易手续费" prop="transactionFeeAmount" v-if="editForm.feeDetailJson&&userInfo.userId=='1242'">
           {{  JSON.parse(editForm.feeDetailJson).transactionFeeAmount }}
          <!-- {{  b(editForm.feeDetailJson.transactionFeeAmount)}} -->
        </el-form-item>  
       

        <el-form-item label="交易金额" prop="transactionAmount">
          {{ b(editForm.transactionAmount) }}
        </el-form-item>

        <el-form-item label="交易币种" prop="transactionCurrency">
          {{ editForm.transactionCurrency }}
        </el-form-item>

        <el-form-item label="到账金额" prop="arrivalAmount">
          {{ b(editForm.arrivalAmount) }}
        </el-form-item>
        <!-- <el-form-item label="手续费" prop="feeDeductionAmount">
          {{ b(editForm.feeDeductionAmount) }}
        </el-form-item> -->
        <!-- <el-form-item label="交易费率" prop="transactionAmountRate">
          {{ editForm.transactionAmountRate }}
        </el-form-item> -->
        <!-- <el-form-item label="卡余额" prop="cardBalance">
          {{ b(editForm.cardBalance) }}
        </el-form-item> -->
        <el-form-item
          label="交易类型"
          prop="transactionType"
          v-if="editForm.transactionType"
        >
          {{ typeJson[editForm.transactionType] }}
        </el-form-item>
        <el-form-item label="交易状态" prop="status" v-if="editForm.status">
          {{ statusJson[editForm.status] }}
        </el-form-item>
        <el-form-item label="交易时间" prop="createdAt">
          {{ timestampToTime(editForm.createdAt, 8 * 60 * 60) }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  timestampSubTime,
  spStr,
} from "../../utils/util";
import { baseURL, req, service, format, getUrl } from "../../api/axiosFun";
import { currencyData } from "../../utils/cardData";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false,
      addFormVisible: false,
      editFormVisible: false,
      b: format,
      timestampToTime: timestampToTime,
      currencyData: currencyData,
      value1: "",
      typeData: [
        { key: "请选择交易类型", value: "" },
        { key: "消费", value: "auth" },
        { key: "纠正授权", value: "corrective_auth" },
        { key: "验证", value: "verification" },
        { key: "撤销", value: "void" },
        { key: "退款", value: "refund" },
        { key: "校正退款", value: "corrective_refund" },
        { key: "转入", value: "recharge" },
        { key: "卡金额退还", value: "recharge_return" },
        { key: "销卡退回", value: "discard_recharge_return" },
        { key: "服务费", value: "service_fee" },
        { key: "退款撤销", value: "refund_reversal" },
        { key: "汇入", value: "fund_in" },
      ],
      typeJson: {
        auth: "消费",
        corrective_auth: "纠正授权",
        verification: "验证",
        void: "撤销",
        refund: "退款",
        corrective_refund: "校正退款",
        recharge: "转入",
        recharge_return: "卡金额退还",
        discard_recharge_return: "销卡退回",
        service_fee: "服务费",
        refund_reversal: "退款撤销",
        fund_in: "汇入",
      },
      statusData: [
        { key: "请选择交易状态", value: "" },
        { key: "待处理", value: "pending" },
        { key: "已授权", value: "authorized" },
        { key: "失败", value: "failed" },
        { key: "撤销", value: "void" },
        { key: "处理中", value: "processing" },
        { key: "成功", value: "succeed" },
      ],
      statusJson: {
        pending: "待处理",
        authorized: "已授权",
        failed: "失败",
        void: "撤销",
        processing: "处理中",
        succeed: "成功",
      },
      editForm: {},
      formInline: {
        pageNum: 1,
        pageSize: 10,
        cardId: "",
        cardNo: "",
        transactionType: "",
        transactionCurrency: "",
        createdAtStart: "",
        createdAtEnd: "",
        status: "",
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      hasPermission:false

    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    this.getdata(this.formInline);
    if(this.$store.state.user){
      this.userInfo = JSON.parse(this.$store.state.user);
      this.hasPermission = this.$hasPermission(this.userInfo,['common'])
      this.hasPermission9 = this.$hasPermission(this.userInfo,['common','user9'])   
    } 
  },

  computed: {
    ...mapGetters(["getUser"]), 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
      this.hasPermission = this.$hasPermission(this.userInfo,['common'])  
      this.hasPermission9 = this.$hasPermission(this.userInfo,['common','user9'])  

    },
  },
  
  methods: {
    hasPermissionMethod(data) {
      // // 调用全局公共方法
      // this.userInfo = JSON.parse(this.$store.state.user);
      // return this.$hasPermission(this.userInfo,data) 
    },
    exportEx() {
      let url = getUrl(this.formInline); 
      service
        .post("/api/wf/exportTransactionList" + url, {})
        .then((res) => {
          this.loading = false; 
          if (res.code == 0) {
            window.open(
              baseURL + "/common/download?fileName=" + res.msg,
              "_blank"
            );
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err);
        });
    },
    getdata(parameter) {
      let url = getUrl(parameter);
      service
        .get("/api/wf/getBudgetTransferRecordList" + url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    createdData() {
      if (this.value1) {
        this.formInline.createdAtStart = timestampSubTime(
          this.value1[0]
        );
        this.formInline.createdAtEnd = timestampSubTime(
          this.value1[1]
        );
      } else {
        this.formInline.createdAtStart = "";
        this.formInline.createdAtEnd = "";
      }
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    //显示编辑界面
    handleEdit(index, row) {
      this.editFormVisible = true;
      this.editForm = row;
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 